HTML Head Element

    <html> element has two main nested elements <head> and <body>. <body> element contain the main content of the web page and <head> element contain the meta data of the web page. <head> contain many nested elements which include <title>, <style>, <meta>, <link>, <script>, and <base>. All of these elements does not display on the browser they only provide additional information about the page itself.

    <head> Element

    <head> element is used to contain the metadata elements. Metadata elements provided additional information about the HTML document. The metadata of <head> element provide a brief introduction of HTML document, so search engine can filter the webpages according to the user query.

    Example 

    <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

    HTML <title> element

    As the element name suggests, it is used to specify the title of the document. The name of the tile displayed at the browser tab.

    Example 

    <!DOCTYPE html>
<html>

<head>
  <title>HTML Tutorial</title>
</head>

<body>
</body>

</html>

    <style> Element

    <style> element also reside in <head> element, and it define the CSS styling for the document.

    Example 

    <!DOCTYPE html>
<html>

<head>
  <title>HTML</title>

  <style>
  body {background-color: blue;}
  h1 {color: red;}
  p {color: white;}
</style>

</head>

<body>
</body>

</html>

    HTML <link> element

    <link> element is used to specify the location of external CSS file, and it is also mentioned inside <head> element. 

    <link rel="stylesheet" href="style.css">

    HTML <meta> Element

    <meta> is a close tag which means it does not have an end tag. It is used to provide the overview description about the webpage or document, so it becomes easier for search engines to find the page.
    Example 
    <meta charset="UTF-8"  content="HTML Tutorial">

    <meta> tag can also be used to control the viewport of the webpage and make it more responsive. Generally, a viewport defines the visible area on which the web page will be displayed. And it varies from devices to devices. Using the <meta> element, we can scale the viewport of the document according to the user device. 

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

    HTML <script> Element

    Generally <script> element also defined inside the <head> element, but developer can also put it inside the <body> element. <script> element define the JavaScript for the document.

    Example 

    <!DOCTYPE html>
<html>
<head>
  <title>HTML Tutorial</title>
  <script>

     alert("HTML Tutorial")

 </script>
</head>
<body>
</body>
</html>

    HTML <base> element

    <base> element represent the base URL to use for all the relative URLs present in the document. 

    <!DOCTYPE html>
<html>

<head>
<base href="https://www.techgeekbuzz.com/" target="_blank"></head>

<body>
<a href ="html-cheat-sheet/"> HTML cheat Sheet </a>
</body>
</html>

    Output

    HTML cheat Sheet

    By default, the base URL has become techgeekbuzz.com.

    Summary

    • <head> element contains the metadata about the web page.
    • It helps search engine to find the appropriate page.
    • It contains various elements including <style>, <script>, <meta>, etc.
    • The browser does not display the content of <head> element.
    Previous Tutorial Next Tutorial